<template>
  <div class="">

    <p>过度属性</p>
    <div id="box1"></div>

  </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    components:{

    },
    watch:{

    },
    computed:{

    },
    created() {

    },
    mounted() {

    },
    methods: {
        
    }
}
</script>

<style scoped>
p {
  font-size: 30px;
}
#box1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  /* 复合写法 */
  /* transition:box-shadow 2s linear delay; */
  /* 过渡属性 */
  transition-property: box-shadow,transform,background-color;
  /* 过渡完成时间 */
  transition-duration: 2s;
  /* 过渡函数 ease linear ease-in ease-out ease-in-out*/
  transition-timing-function: linear;
  /* 延时执行时间 */
  transition-delay: 2s;
}
#box1:hover {
  transform: translate(30px,-10px);
  box-shadow: 0px 0px 10px 10px #ccc;
  background-color: red;
}
</style>